<template>
  <div>
    <ul>
      <li v-for="item in nameArr" :key="item.id">{{ item.id }}---{{ item.name }}</li>
    </ul>
    <hr />
    <div>
      {{ userobj.girlfriend.name }} -- {{ userobj.girlfriend.age }}
    </div>
    <p><button @click="addage">小丽变老了</button></p>
    <hr />
    <p @click="addnum">{{ num }}</p>

  </div>
</template>

<script>
// 知识点1:  reactive(数据) 该数据只能是复杂的数据类型,将该数据处理成响应式数据

// 知识点2: ref 和reactive 实现响应式的区别 
// 如果ref 处理的数据为复杂的数据类型,本质上其实也是借助了reactive 将复杂数据类型处理成响应式数据,赋值给.value属性
// ref 可以处理所有的数据类型, reactive 只能处理的复杂数据类型.

import { reactive, ref } from 'vue';
export default {
  name: '',
  setup() {
    // 创建一个响应式的数组
    const nameArr = reactive([{ id: 1, name: "金蝉子" }, { id: 2, name: '观自在' }])
    console.log(nameArr);

    // 创建一个对象
    const userobj = reactive({
      name: "小明",
      age: 20,
      girlfriend: {
        name: "小丽",
        age: 18
      }
    })

    const addage = () => {
      userobj.girlfriend.age++
    }


    // 创建一个基本的数据类型 比如说 num
    let num = ref(100)
    // console.log('num', num);
    const addnum = () => {
      num.value++
      console.log('num', num);
    }

    return {
      nameArr,
      userobj,
      addage,
      num,
      addnum
    }

  }


}

</script>
<style scoped>

</style>